import 'package:flutter/material.dart';
import "package:get/get.dart";

class TaskDetail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: 
        
        ListView(children: [
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              Image.asset(
                'static/images/detailimg.png',
                fit: BoxFit.fill,
              ),
              Positioned(
                left: 8.0,
                top: 20,
                child: IconButton(
                  onPressed: () {
                    Get.back();
                    print('object');
                  },
                  icon: Image.asset(
                    'static/images/back.png',
                    width: 22,
                    fit: BoxFit.fitWidth,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
      Container(
        margin: EdgeInsets.symmetric(horizontal: 15),
        transform: Matrix4.translationValues(0.0, -25.0, 0.0),
        child: Column(
          children: [
            Row(
              children: [
                Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(width: 2, color: Color(0XFFFFFFFF))),
                  child: Image.asset(
                    'static/aaa.png',
                    width: 60,
                    height: 80,
                    fit: BoxFit.fill,
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      height: 35,
                    ),
                    Text(
                      'OSG公海云集视频计划！',
                      style: TextStyle(fontSize: 16),
                    ),
                    Row(
                      children: [
                        Image.asset(
                          'static/gongzhong.png',
                          width: 12,
                          fit: BoxFit.fitWidth,
                        ),
                        Text('OSG公海云集官方号 >'),
                      ],
                    ),
                  ],
                ),
              ],
            ),
            SizedBox(
              height: 30,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '开始时间',
                      style: TextStyle(fontSize: 12),
                    ),
                    Text(
                      '2023.12.02 12:22',
                      style:
                          TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '截止时间',
                      style: TextStyle(fontSize: 12),
                    ),
                    Text(
                      '2023.12.02 12:22',
                      style:
                          TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              alignment: Alignment.topLeft,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: Color(0XFFDDDDDD)),
              ),
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.topLeft,
                    padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '任务奖励：2323ST',
                          style: TextStyle(fontSize: 12),
                        ),
                        SizedBox(
                          height: 15,
                        ),
                        Text(
                          '参与人数：2323w',
                          style: TextStyle(fontSize: 12),
                        ),
                        SizedBox(
                          height: 15,
                        ),
                        Text(
                          '参与内容：2323w',
                          style: TextStyle(fontSize: 12),
                        ),
                        SizedBox(
                          height: 15,
                        ),
                        Text(
                          '2323.2w个点赞，2323.2w个评论，2323.2w个转发',
                          style: TextStyle(fontSize: 12),
                        ),
                      ],
                    ),
                  ),
                  Container(
                      padding: EdgeInsets.symmetric(horizontal: 15),
                      height: 40,
                      color: Color(0XFFf2f1fe),
                      child: Row(
                        children: [
                          Text('奖励已发放 8%'),
                          SizedBox(
                            width: 10,
                          ),
                          Expanded(
                            child: GradientLinearProgress(progress: 0.7),
                          )
                        ],
                      )),
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Text(
              '内容要求',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: 10,
            ),
            Row(
              children: [
                Container(
                  width: 3,
                  height: 3,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(3),
                    color: Color(0XFF333333),
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Text('视频时长不低于10秒')
              ],
            ),
            SizedBox(
              height: 5,
            ),
            Row(
              children: [
                Container(
                  width: 3,
                  height: 3,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(3),
                    color: Color(0XFF333333),
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Text('视频时长不低于10秒')
              ],
            ),
          ],
        ),
      ),
      Container(
        margin: EdgeInsets.only(bottom: 15, right: 15, left: 15),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text(
                      '33',
                      style: TextStyle(fontSize: 20, color: Color(0XFFEF0000)),
                    ),
                    Text(
                      'ST',
                      style: TextStyle(fontSize: 12, color: Color(0XFF999999)),
                    ),
                  ],
                ),
                Text(
                  '任务奖励',
                  style: TextStyle(fontSize: 12, color: Color(0XFF999999)),
                ),
              ],
            ),
            Container(
              alignment: Alignment.center,
              width: 200,
              height: 50,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular((50)),
                gradient: LinearGradient(
                  colors: [
                    Color(0xff2189E7),
                    Color(0xffBF67F8),
                  ], // 定义颜色列表
                  begin: Alignment.topLeft, // 渐变开始的位置
                  end: Alignment.bottomRight, // 渐变结束的位置
                ),
              ),
              child:
              GestureDetector(
                onTap: ()=>{
                  Get.toNamed('/talk/submit_task')
                },
                child: Text(
                '立即参与',
                style: TextStyle(color: Color(0XFFFFFFFF), fontSize: 16),
              ),
              )
               
            )
          ],
        ),
      )
    ]));
  }
}

class GradientLinearProgress extends StatelessWidget {
  final double progress;
  final double height;

  const GradientLinearProgress({
    Key? key,
    required this.progress,
    this.height = 8.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: height,
      child: Stack(
        children: [
          // 背景层
          Container(
            decoration: BoxDecoration(
              color: Color(0XFFead5fd),
              borderRadius: BorderRadius.circular(height / 2),
            ),
          ),
          // 渐变进度层
          ClipRRect(
            borderRadius: BorderRadius.circular(height / 2),
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                width: MediaQuery.of(context).size.width *
                    progress *
                    0.5, // 调整宽度系数
                height: height,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xff2189E7), Color(0xffBF67F8)],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
